<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动模态框</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				background-color: #f4f5f8;
			}
			a {
				text-decoration: none;
				color: #000;
			}
			.w {
				width: 800px;
				margin: 0 auto;
			}
			.logo {
				
				height: 50px;
				line-height: 50px;
				cursor: pointer;
			}
			.logo a {
				display: block;
				width: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			.login {
				display: none;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				
				width: 520px;
				height: 280px;
				background: #fff;
				box-shadow: 0 0 10px rgba(0,0,0,.3);
				border-radius: 5px;
				z-index: 1;				
			}
			
			.login-hd {
				position: relative;
				width: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 25px;
				cursor:move;
			}
			.login-hd .close {
				position: absolute;
				top: -25px;
				right: -25px;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				overflow: hidden;
				
			}
			
			.login-hd .close a {
				display: block;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: 1px solid #ccc;
				border-radius: 25px;
				background-color: #fff;
			}
			
			.login-item {
				width: 100%;
				height: 40px;
				line-height: 40px;
				margin-top: 20px;
				/*background-color: pink;*/
				
			}
			.login-item label {
				display: inline-block;
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: right;
				vertical-align: middle;
			}
			.login-item input {
				width: 400px;
				height: 40px;
				padding-left: 5px;
				outline: none;
				border: 1px solid #ccc;
			}
			.btn {
				width: 100%;
				height: 40px;
				line-height: 40px;
				margin-top: 30px;
				text-align: center;
			}
			.btn button {
				width: 200px;
				height: 40px;
				line-height: 40px;
				border: 1px solid #ccc;
				outline: none;
				background: #fff;
				cursor: pointer;
				
			}
			
			.bg {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.2);
			}
		</style>
	</head>
	<body>
		<div class="logo w">
			<a href="javascript:;">点击显示模态框</a>
		</div>
		
		<!--模态框-->
		<div class="login">
			<div class="login-hd">
				登录会员
				<div class="close">
					<a href="javascript:;">x</a>
				</div>
			</div>
			
			<!--用户名-->
			<div class="login-item">
				<label for="username">用户名：</label>
				<input type="text" placeholder="请输入用户名" id="username" class="username"/>
			</div>
			<div class="login-item">
				<label for="password">登录密码：</label>
				<input type="password" placeholder="请输入登录密码" id="password" class="password"/>
			</div>
			
			<div class="btn">
				<button>登录</button>
			</div>
		</div>
		
		<!--背景-->
		<div class="bg"></div>
		
		<script type="text/javascript">
			//获取对象
			var show = document.querySelector('.logo');
			var model = document.querySelector('.login');
			var close = document.querySelector('.close a');
			var bg = document.querySelector('.bg');
			var hd = document.querySelector('.login-hd');
			
			//显示模态框
			show.addEventListener('click',function() {
				bg.style.display = 'block'
				model.style.display = 'block';
			})
			//隐藏模态框
			close.addEventListener('click',function() {
				bg.style.display = 'none';
				model.style.display = 'none';
			})
			//当鼠标第一次点击到模态框的头部时,计算鼠标在盒子内的坐标
			hd.addEventListener('mousedown',function(e) {
				var x = e.pageX - model.offsetLeft;
				var y = e.pageY - model.offsetTop;
				
				//当鼠标移动的时候,将计算好的坐标给模态框的定位
				document.addEventListener('mousemove',move);
				
				//计算模态框定位
				function move(e) {
					model.style.left = (e.pageX - x) + 'px';
					model.style.top = (e.pageY - y) + 'px';
				}
				//当鼠标弹起的时候,清除鼠标移动事件
				document.addEventListener('mouseup',function() {
					document.removeEventListener('mousemove',move)
				})
			})
			
			//username
			var username = document.querySelector('.username');
			var password = document.querySelector('.password')
			username.addEventListener('focus',function() {
				this.style.border = '1px solid #1E90FF';
				this.style.boxShadow = '0 0 10px rgba(0,0,0,.3)'
			})
			username.addEventListener('blur',function() {
				this.style.border = '1px solid #ccc';
				this.style.boxShadow = ''
			})
			
			password.addEventListener('focus',function() {
				this.style.border = '1px solid #1E90FF';
				this.style.boxShadow = '0 0 10px rgba(0,0,0,.3)'
			})
			password.addEventListener('blur',function() {
				this.style.border = '1px solid #ccc';
				this.style.boxShadow = ''
			})
		</script>
	</body>
</html>
